<template>
  <div>
    <!-- 这个使用默认值 unset -->
    <div v-highlight>{{ msg }}</div>
    <!-- 这个使用默认值 unset -->

    <!-- 这个使用传进去的黄色 -->
    <div v-highlight="`yellow`">{{ msg }}</div>
    <!-- 这个使用传进去的黄色 -->

    <div v-foo="foo"></div>

  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  // 自定义指令在这里编写，和 setup 同级别
  directives: {
    // directives 下的每个字段名就是指令名称
    // highlight: {
    //   // 钩子函数
    //   mounted(el, binding) {
    //     el.style.backgroundColor =
    //       typeof binding.value === 'string' ? binding.value : 'unset'
    //   },
    // },
    // 写法2
    highlight(el, binding) {
      el.style.backgroundColor =
        typeof binding.value === 'string' ? binding.value : 'unset'
    },
    foo: {
      beforeUpdate(el, binding) {
        console.log('beforeUpdate', binding)
      },
      updated(el, binding) {
        console.log('updated', binding)
      },
      mounted(el, binding) {
        console.log('mounted', binding)
      },
      // 需要设置为 true ，如果是 false 则不会触发
      deep: true,
    },
  },
  setup() {
    const msg = ref<string>('Hello World!')

    // 定义一个有嵌套属性的对象
    const foo = reactive({
      bar: {
        baz: 1,
      },
    })

    // 2s 后修改其中一个值，会触发 beforeUpdate 和 updated
    setTimeout(() => {
      foo.bar.baz = 2
      console.log(foo)
    }, 2000)


    return {
      msg,
    }
  },
})
</script>

<style scoped>

</style>
